<!DOCTYPE html>
<html>
<head>
    <title>SAES</title>
    <link href="{{MEDIA_URL}}login/okendoken/css/application.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{MEDIA_URL}}login/keyboard/css/keyboard.css" />
    <link rel="shortcut icon" href="{{MEDIA_URL}}login/ico/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
</head>
<body>
<div class="single-widget-container">
    <section class="widget login-widget">
        <header class="text-align-center">
            <h4> SAES </h4>
        </header>
        <div class="body">

            
             <form id='formulario' method='post' action=''>{% csrf_token %}
                 {{formulario.clave_usuario}}
                 <p><input type='submit' value='Confirmar'/></p>
             </form>
            
        
        </div>
        <footer>
            <div class="facebook-login">
                <a href="#" id="mostrar_teclado"><span>Mostrar teclado</span></a>
            </div>
        </footer>
    </section>
</div>

<script src="{{MEDIA_URL}}login/keyboard/js/libs/jquery-1.6.4.min.js"></script>
<script src="{{MEDIA_URL}}login/keyboard/js/jquery.keyboard/jquery.keyboard.js"></script>
<script src="{{MEDIA_URL}}login/keyboard/js/jquery.keyboard/keyboards/qwerty.js"></script>
<script src="{{MEDIA_URL}}login/keyboard/js/jquery.keyboard/plugins/form.js"></script>
<script src="{{MEDIA_URL}}login/keyboard/js/jquery.selection.js"></script>

<script>
        (function($){$(document).ready(function(){
            $('#mostrar_teclado').click(function(){
                var valor = document.getElementById('mostrar_teclado').innerHTML.substr('', 1).toLowerCase();
                if(valor == "m" || valor == "<"){
                    $('#mostrar_teclado').html('Cerrar teclado');
                    $('body').keyboard({keyboard: 'qwerty', plugin: 'form'});
                    $('.keyboard').css('display','block');
                }else{
                    $('.keyboard').css('display', 'none');
                    $('#mostrar_teclado').html('Mostrar teclado');
                }
            });
        })})(jQuery);
</script>

</body>
</html>